<template>
    <div class="container">
        <div class="title">
            <h1>项目名称</h1>
        </div>
        <div class="form-card">
            <h2 class="card-title">欢迎登录</h2>
            <n-form ref="formRef" :model="formData" :rules="rules">
                <n-form-item path="account" label="账号">
                    <n-input
                        v-model:value="formData.account"
                        clearable
                        placeholder="请输入账号"
                        @keydown.enter.prevent
                    />
                </n-form-item>
                <n-form-item path="password" label="密码">
                    <n-input
                        v-model:value="formData.password"
                        show-password-on="click"
                        clearable
                        placeholder="请输入密码"
                        type="password"
                        @keydown.enter.prevent
                    />
                </n-form-item>
            </n-form>
            <div class="footer">
                <span class="reg" @click="onReg">注册账号</span>
                <n-button type="info" @click="onLogin"> 登录 </n-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import { createDiscreteApi } from 'naive-ui';
import { setDocumentTitle } from '@/utils/project';
import { login } from '@/api/login';
import { useRouter } from 'vue-router';
import { setToken } from '@/utils/auth';
import { useStore } from '@/store';
import { ref } from 'vue';

const router = useRouter();
const store = useStore();
const { message } = createDiscreteApi(['message']);
setDocumentTitle('登录');
const formRef = ref(null);
const formData = ref({
    account: 'admin',
    password: 'admin'
});
const rules = {
    account: [
        {
            required: true,
            message: '请输入账号'
        }
    ],
    password: [
        {
            required: true,
            message: '请输入密码'
        }
    ]
};
const onLogin = () => {
    formRef.value?.validate(errors => {
        if (!errors) {
            login(formData.value).then(res => {
                message.success('登录成功');
                const { userInfo, token } = res;
                store.setUserInfo(userInfo);
                setToken(token);
                router.push({ name: 'homePage' });
            });
        } else {
            console.log(errors);
        }
    });
};
const onReg = () => {
    router.push({ name: 'register' });
};
</script>
<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: var(--blue-100);

    .title {
        position: absolute;
        top: 20px;
        left: 60px;
    }

    .form-card {
        position: absolute;
        bottom: 184px;
        right: 100px;
        width: 380px;
        padding: 20px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0px 2px 10px 0px rgba(27, 33, 41, 0.1);

        .card-title {
            text-align: center;
            margin-bottom: 10px;
        }

        .footer {
            width: 100%;
            display: inline-flex;
            justify-content: space-between;
            align-items: center;

            .reg {
                color: var(--blue-500);
                cursor: pointer;
            }
        }
    }
}
</style>
